<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" xmlns="http://www.w3.org/1999/html"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Rectangle Mobile Template</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/font-awesome.css">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/templatemo-style.css">
        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    </head>
     <style>
        *{margin:0;padding:0}
        #wrap{width:49px;height:49px;position: fixed;right:80px;bottom:80px;}
        #wrap img{border-radius: 50%}
        #round{width:49px;height:49px;position: absolute;top:-100px;left:-1000px;transition: all 1s}
        #nav_list{width:42px;height:42px;position: absolute;top:-100px;left:-975px}
        #nav_list img{position: absolute;top:100px;left:-1100px;transition: all 1s}
    </style>
    <script>
        window.onload=function(){
            var oBtn=document.getElementById('round');
            var aImg=document.getElementsByTagName('img');
            var onOff=true;
            var iR=-120;
            oBtn.onclick=function(){
                if(onOff){
                    this.style.transform='rotate(-360deg)'
                    for(var i=0;i<aImg.length;i++){
                        var lt=toLT(iR,90/4*i);
                        //图片的left与top
                        aImg[i].style.left=lt.l+'px'
                        aImg[i].style.top=lt.t+'px';
                        aImg[i].style.transform='rotate(-360deg)';
                        aImg[i].style.transition='1s '+i*100+'ms';
                    }
                }else{
                    for(var i=0;i<aImg.length;i++){
                        //图片的left与top
                        aImg[i].style.left=0+'px'
                        aImg[i].style.top=0+'px';
                        aImg[i].style.transform='rotate(0deg)';
                        aImg[i].style.transition='1s '+i*100+'ms';
                    }
                    this.style.transform='rotate(0deg)'
                }
                onOff=!onOff;
            };
            function toLT(iR,iDeg){
                return{l:Math.round(Math.sin(iDeg/180*Math.PI)*iR),t:Math.round(Math.cos(iDeg/180*Math.PI)*iR)}
            }
        }
        
    </script>
    <body>
    	<!--<audio src="mp3/star.mp3"autoplay=""></audio>-->
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        
        <div class="site-bg"></div>
        <div class="site-bg-overlay"></div>

        <!-- TOP HEADER -->
        <div class="top-header">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <p class="phone-info">Call me: <a href="#">188-1261-3829</a></p>
                    </div>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <div class="social-icons">
                            <ul>
                                <li><a href="http://weibo.com/3557721615/like?from=page_100505_profile&wvr=6&mod=like&sudaref=www.baidu.com&retcode=6102" class="fa fa-weibo"></a></li>
                                <li><a href="http://weibo.com/3557721615/like?from=page_100505_profile&wvr=6&mod=like&sudaref=www.baidu.com&retcode=6102" class="fa fa-weibo"></a></li>
                                <li><a href="http://weibo.com/3557721615/like?from=page_100505_profile&wvr=6&mod=like&sudaref=www.baidu.com&retcode=6102" class="fa fa-weibo"></a></li>
                                <li><a href="http://weibo.com/3557721615/like?from=page_100505_profile&wvr=6&mod=like&sudaref=www.baidu.com&retcode=6102" class="fa fa-weibo"></a></li>
                                <li><a href="http://weibo.com/3557721615/like?from=page_100505_profile&wvr=6&mod=like&sudaref=www.baidu.com&retcode=6102" class="fa fa-weibo"></a></li>
                                <li><a href="http://weibo.com/3557721615/like?from=page_100505_profile&wvr=6&mod=like&sudaref=www.baidu.com&retcode=6102" class="fa fa-weibo"></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div> <!-- .top-header -->


        <div class="visible-xs visible-sm responsive-menu">
            <a href="#" class="toggle-menu">
                <i class="fa fa-bars"></i> Show Menu
            </a>
            <div class="show-menu">
                <ul class="main-menu">
                    <li>
                        <a class="show-1 active homebutton" href="#"><i class="fa fa-home"></i>主页</a>
                    </li>
                    <li>
                        <a class="show-2 aboutbutton" href="#"><i class="fa fa-user"></i>个人资料</a>
                    </li>
                    <li>
                        <a class="show-3 projectbutton" href="#"><i class="fa fa-camera"></i>照片</a>
                    </li>
                    <li>
                        <a class="show-5 contactbutton" href="#"><i class="fa fa-cloud"></i>工作经验</a>
                    </li>
                    <li id="home" style="width:50px;height:50px;border-radius:50%"><img src="images/my.JPG"></li>
                </ul>
            </div>
        </div>
		<div class="copyrights">Collect from <a href="http://www.cssmoban.com/" >免费模板</a></div>
        <div class="container" id="page-content">
            <div class="row">


                
                <div class="col-md-9 col-sm-12 content-holder">
                    <!-- CONTENT -->
                    <div id="menu-container">
                        
                        <div class="logo-holder logo-top-margin">
                            <a href="#" class="site-brand"><img src="images/my.JPG" alt=""></a>
                        </div>
                        
                        
                        <div id="menu-1" class="homepage home-section text-center">
                            <div class="welcome-text">
                                <h2>Hello, 欢迎来到 <strong>李峰</strong>  个人空间</h2>
                                <div id="wrap">
 							   <div id="nav_list">
  							      <img src="images/clos.JPG">
  							      <img src="images/full.JPG">
     	 						  <img src="images/open.JPG">
       							  <img src="images/prev.JPG">
                                  <img src="images/refresh.JPG">
   							   </div>
   							   <div id="round"><img src="images/home.jpg"></div>
							   </div>
                            </div>
                        </div>

                        <div id="menu-2" class="content about-section">
                            <div class="row">
                                <div class="col-md-8 col-sm-8">
                                    <div class="box-content profile">
                                        <h3 class="widget-title">个人资料</h3>
                                        <div class="profile-thumb">
                                            <img src="images/8.JPG" alt="">
                                        </div>
                                        <div class="profile-content">
                                            <h5 class="profile-name">李峰</h5>
                                            <span class="profile-role">Web前端工程师</span>
                                            <p>性别：男</p>
                                            <p>年龄：21</p>
                                            <p>籍贯：山东烟台</p>
                                            <p>电话：188-1261-3829</p>
                                            <p>邮箱：1057839071@qq.com</p>
                                            <p>教育背景：天津电子信息学院　　 软件技术</p>
                                            <p>※　在校期间，参加蚂蚁社团，并且同社员一起使用ASP.NET开发并维护了本校的一套图书管理系统</p>
                                            <p>※　担任院学生会组织部干事，多次获得奖学金，多次获得比赛奖项</p>
                                        
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-4">
                                    <div class="box-content">
                                        <h3 class="widget-title">扫一扫，有惊喜呦！ </h3>
                                     	<div style="margin-left: -26px;"><img src="images/weixin.jpg"></div>
                                        <div class="about-social">
                                            <ul>
                                                <li><a href="http://weibo.com/3557721615/like?from=page_100505_profile&wvr=6&mod=like&sudaref=www.baidu.com&retcode=6102" class="fa fa-weibo"></a></li>
                                                <li><a href="http://weibo.com/3557721615/like?from=page_100505_profile&wvr=6&mod=like&sudaref=www.baidu.com&retcode=6102" class="fa fa-weibo"></a></li>
                                                <li><a href="http://weibo.com/3557721615/like?from=page_100505_profile&wvr=6&mod=like&sudaref=www.baidu.com&retcode=6102" class="fa fa-weibo"></a></li>
                                                <li><a href="http://weibo.com/3557721615/like?from=page_100505_profile&wvr=6&mod=like&sudaref=www.baidu.com&retcode=6102" class="fa fa-weibo"></a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">

                                <!--<div class="col-md-7 col-sm-7">-->
                                    <div class="box-content">
                                        <h3 class="widget-title">职业技能</h3>
                                        <p>1.精通HTML 、CSS等前端开发技术，了解HTML5、CSS3新特性。</br>
                                            　能够熟练完成各种静态页面的编写，熟练使用CSS3实现各种网页动效，H5新特性。
                                        </p>
                                        <p>2.精通JavaScript、DOM等原生JS。</br>
                                            　能够熟练手写原生js代码，深入理解闭包，面向对象，原型链，熟练使用DOM开发页面功能。
                                        </p>
                                        <p>3.熟练掌握jQuery,Ajax、JSON等相关技术。</br>
                                            　能够熟练使用Ajax与服务器交互获取数据，深入理解HTTP协议，能够对网站效率进行优化。
                                        </p>
                                        <p>4.熟练掌握AngulearJs、Bootstrap、ionic等框架。</p>
                                        <p>5.熟悉asp语言、sql数据库，了解后台开发。</p>
                                        <p>6.熟练使用photoshop</p>

                                        <!--<ul class="progess-bars">-->
                                            <!--<li>-->
                                                <!--<span>HTML CSS 80%</span>-->
                                                <!--<div class="progress">-->
                                                    <!--<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div>-->
                                                <!--</div>-->
                                            <!--</li>-->
                                            <!--<li>-->
                                                <!--<span>PHOTOSHOP 95%</span>-->
                                                <!--<div class="progress">-->
                                                    <!--<div class="progress-bar" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;"></div>-->
                                                <!--</div>-->
                                            <!--</li>-->
                                            <!--<li>-->
                                                <!--<span>WORDPRESS 70%</span>-->
                                                <!--<div class="progress">-->
                                                    <!--<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"></div>-->
                                                <!--</div>-->
                                            <!--</li>-->
                                            <!--<li>-->
                                                <!--<span>PHP mySQL 50%</span>-->
                                                <!--<div class="progress">-->
                                                    <!--<div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"></div>-->
                                                <!--</div>-->
                                            <!--</li>-->
                                        <!--</ul>-->
                                    </div>
                                <!--</div>-->
                            </div>
                        </div>

                        <div id="menu-3" class="content gallery-section">
                            <div class="box-content">
                                <h3 class="widget-title">随拍</h3>
                                <div class="row">
                                    <div class="col-md-4 col-sm-6 col-xs-12">
                                        <div class="project-item">
                                            <img src="images/pic1.JPG" alt="">
                                            <div class="project-hover">
                                                <h4>秋日的午后---随拍</h4>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-sm-6 col-xs-12">
                                        <div class="project-item">
                                            <img src="images/pic2.JPG" alt="">
                                            <div class="project-hover">
                                                <h4>一直往前走，是否会看见未来</h4>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-sm-6 col-xs-12">
                                        <div class="project-item">
                                            <img src="images/pic3.JPG" alt="">
                                            <div class="project-hover">
                                                <h4>秋日的午后---随拍</h4>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-sm-6 col-xs-12">
                                        <div class="project-item">
                                            <img src="images/pic4.JPG" alt="">
                                            <div class="project-hover">
                                                <h4>落叶</h4>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-sm-6 col-xs-12">
                                        <div class="project-item">
                                            <img src="images/pic5.jpg" alt="">
                                            <div class="project-hover">
                                                <h4>求知、渴望</h4>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-sm-6 col-xs-12">
                                        <div class="project-item">
                                            <img src="images/pic6.JPG" alt="">
                                            <div class="project-hover">
                                                <h4>落叶</h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="project-pages">
                                    <ul>
                                        <li><a href="#">1</a></li>
                                        <li><a href="#">2</a></li>
                                        <li><a href="#">3</a></li>
                                        <li><a href="#">...</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div id="menu-4" class="content contact-section">
                            <div class="row">
                                <div class="col-md-8 col-sm-8">
                                    <div class="box-content">
                                        <h3 class="widget-title">项目经验</h3>
                                        <p>项目名称1：个人网站（响应式布局）</p>
                                        <p>所用技术:　JavaScript、JQuery、Bootstrap、Angular</p>
                                        <p>项目描述:　利用Bootstrap、Angular框架,独立完成官方主页及订单详情页的编写,
                                            　　　　　包括登陆注册,商品展示排序,添加购物车,商品详情等,用Ajax请求Sql
                                            　　　　　　数据库,完成了简易的数据交互.
                                        </p>

                                        <p>项目名称2：爱票（移动端APP）</p>
                                        <p>所用技术： HTML5、CSS、Javascript、Angular.js、jQuery、ionic</p>
                                        <p>项目描述： 项目主要是完成一个手机购物APP，运用ionic框架来实　　　　　　现。包括搜索物品、查看物品、
                                            添加购物车，结账等多项商城功能；
                                        </p>

                                        <p>项目名称3： 书籍商城（模仿当当网）</p>
                                        <p>所用技术: HTML5、CSS、Javascript、Angular.js、jQuery mobile</p>
                                        <p>项目描述: 1、使用Angular.js框架技术，应用MVC模式、双向数据绑定实现产品展　　　　示、订单管理
                                            单页应用功能；
                                        </p>

                                        <P>西马卫浴</P>
                                        <P>所用技术：HTML、CSS、Javascript、node.js</P>
                                        <P>项目描述：项目为公司官网，运用javascript框架来实现公司的介绍以及产品的展　　　　　示、使用Angular.js框架技术来实现产品展示的应用功能</P>

                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>
                </div>


                <div class="col-md-3 hidden-sm">
                    
                    <nav id="nav" class="main-navigation hidden-xs hidden-sm">
                        <ul class="main-menu">
                            <li>
                                <a class="show-1 active homebutton" href="#"><i class="fa fa-home"></i>主页</a>
                            </li>
                            <li>
                                <a class="show-2 aboutbutton" href="#"><i class="fa fa-user"></i>个人资料</a>
                            </li>
                            <li>
                                <a class="show-3 projectbutton" href="#"><i class="fa fa-camera"></i>照片</a>
                            </li>
                            <li>
                                <a class="show-5 contactbutton" href="#"><i class="fa fa-cloud"></i>工作经验</a>
                            </li>
                        </ul>
                    </nav>

                </div>
            </div>
        </div>

       

        <script src="js/vendor/jquery-1.10.2.min.js"></script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>
		<!-- templatemo 439 rectangle -->
    </body>
</html>